import React from 'react';
import { NavBar, Icon, List, WhiteSpace, Card, WingBlank } from 'antd-mobile';

import './MySpot.css';

const Item = List.Item;

export default class MySpot extends React.Component {
    state = {
    }

    submit() {
        this.props.submit(this.state);
        this.props.click();
    }

    render() {
        return (
            <div className="my-spot-box">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={this.props.click}
                    rightContent={<Icon type="cross" style={{ transform: 'rotate(45deg)' }} onClick={this.props.clickAddMySpot}/>}
                >我的车位</NavBar>
                {showSpotInfo(this.props.mySpot)}
            </div>
        )
    }
}

function showSpotInfo(stopArr) {
    return stopArr.map((item, index) => {
        return <div key={index}>
        <WingBlank size="lg">
            <WhiteSpace size="lg" />
            <Card>
                <Card.Body>
                    <List>
                        <Item extra={item.name}>停车场名称</Item>
                        <Item extra={item.address}>停车场地址</Item>
                        <Item extra={item.spotId}>车位号</Item>
                        <Item extra={<img className='spot-img' src={item.img} alt={item.name} />}>车位照片</Item>
                    </List>
                </Card.Body>
            </Card>
            <WhiteSpace size="lg" />
        </WingBlank></div>
    })
}
